<template>
  <div class="space-y-6">
    <div class="flex justify-between items-center">
      <h1 class="page-title">统计报表</h1>
      <div class="text-sm breadcrumbs">
        <ul>
          <li><a>首页</a></li>
          <li>统计报表</li>
        </ul>
      </div>
    </div>

    <!-- 时间范围选择 -->
    <div class="card bg-base-100 shadow-xl">
      <div class="card-body">
        <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
          <div class="form-control">
            <label class="label">
              <span class="label-text">时间范围</span>
            </label>
            <select v-model="timeRange" class="select select-bordered w-full">
              <option value="today">今日</option>
              <option value="week">本周</option>
              <option value="month">本月</option>
              <option value="quarter">本季度</option>
              <option value="year">本年度</option>
              <option value="custom">自定义</option>
            </select>
          </div>
          <div class="form-control" v-if="timeRange === 'custom'">
            <label class="label">
              <span class="label-text">开始日期</span>
            </label>
            <input type="date" v-model="startDate" class="input input-bordered" />
          </div>
          <div class="form-control" v-if="timeRange === 'custom'">
            <label class="label">
              <span class="label-text">结束日期</span>
            </label>
            <input type="date" v-model="endDate" class="input input-bordered" />
          </div>
        </div>
      </div>
    </div>

    <!-- 统计卡片 -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
      <div class="stats shadow bg-base-100">
        <div class="stat">
          <div class="stat-figure text-primary">
            <i class="fas fa-users text-3xl"></i>
          </div>
          <div class="stat-title">今日新增魂魄</div>
          <div class="stat-value text-primary">89</div>
          <div class="stat-desc">↗︎ 14 (22%)</div>
        </div>
      </div>

      <div class="stats shadow bg-base-100">
        <div class="stat">
          <div class="stat-figure text-secondary">
            <i class="fas fa-gavel text-3xl"></i>
          </div>
          <div class="stat-title">待审判案件</div>
          <div class="stat-value text-secondary">45</div>
          <div class="stat-desc">↘︎ 7 (14%)</div>
        </div>
      </div>

      <div class="stats shadow bg-base-100">
        <div class="stat">
          <div class="stat-figure text-accent">
            <i class="fas fa-sync-alt text-3xl"></i>
          </div>
          <div class="stat-title">轮回次数</div>
          <div class="stat-value text-accent">156</div>
          <div class="stat-desc">↗︎ 23 (35%)</div>
        </div>
      </div>

      <div class="stats shadow bg-base-100">
        <div class="stat">
          <div class="stat-figure text-error">
            <i class="fas fa-fire text-3xl"></i>
          </div>
          <div class="stat-title">地狱人数</div>
          <div class="stat-value text-error">23</div>
          <div class="stat-desc">↘︎ 3 (12%)</div>
        </div>
      </div>
    </div>

    <!-- 图表区域 -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
      <!-- 六道轮回 -->
      <div class="card bg-base-100 shadow-xl">
        <div class="card-body">
          <h2 class="card-title">
            <i class="fas fa-dharmachakra mr-2"></i>
            六道轮回
          </h2>
          <ReincarnationWheel />
        </div>
      </div>

      <!-- 功德分布 -->
      <div class="card bg-base-100 shadow-xl">
        <div class="card-body">
          <h2 class="card-title">
            <i class="fas fa-chart-pie mr-2"></i>
            功德分布
          </h2>
          <div class="stats stats-vertical shadow">
            <div class="stat">
              <div class="stat-title">善道</div>
              <div class="stat-value text-success">45%</div>
              <div class="stat-desc">功德值 > 80</div>
            </div>
            <div class="stat">
              <div class="stat-title">中道</div>
              <div class="stat-value text-warning">35%</div>
              <div class="stat-desc">功德值 40-80</div>
            </div>
            <div class="stat">
              <div class="stat-title">恶道</div>
              <div class="stat-value text-error">20%</div>
              <div class="stat-desc">功德值 < 40</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 详细数据表格 -->
    <div class="card bg-base-100 shadow-xl">
      <div class="card-body">
        <h2 class="card-title">详细数据</h2>
        <div class="overflow-x-auto">
          <table class="table">
            <thead>
              <tr>
                <th>日期</th>
                <th>新增魂魄</th>
                <th>审判数量</th>
                <th>转世人数</th>
                <th>地狱新增</th>
                <th>功德指数</th>
                <th>业障指数</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(record, index) in records" :key="index">
                <td>{{ record.date }}</td>
                <td>{{ record.newSouls }}</td>
                <td>{{ record.judgments }}</td>
                <td>{{ record.reincarnations }}</td>
                <td>{{ record.hellAdditions }}</td>
                <td>
                  <div class="flex items-center">
                    <progress
                      class="progress progress-success w-20"
                      :value="record.meritIndex"
                      max="100"
                    ></progress>
                    <span class="ml-2">{{ record.meritIndex }}%</span>
                  </div>
                </td>
                <td>
                  <div class="flex items-center">
                    <progress
                      class="progress progress-error w-20"
                      :value="record.karmaIndex"
                      max="100"
                    ></progress>
                    <span class="ml-2">{{ record.karmaIndex }}%</span>
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import ReincarnationWheel from '@/components/ReincarnationWheel.vue'

// 时间范围选择
const timeRange = ref('month')
const startDate = ref('')
const endDate = ref('')

// 模拟数据
interface Record {
  date: string
  newSouls: number
  judgments: number
  reincarnations: number
  hellAdditions: number
  meritIndex: number
  karmaIndex: number
}

const records = ref<Record[]>([
  {
    date: '2024-03-09',
    newSouls: 89,
    judgments: 76,
    reincarnations: 65,
    hellAdditions: 15,
    meritIndex: 75,
    karmaIndex: 45,
  },
  {
    date: '2024-03-08',
    newSouls: 92,
    judgments: 81,
    reincarnations: 70,
    hellAdditions: 12,
    meritIndex: 80,
    karmaIndex: 40,
  },
  {
    date: '2024-03-07',
    newSouls: 85,
    judgments: 72,
    reincarnations: 62,
    hellAdditions: 18,
    meritIndex: 70,
    karmaIndex: 50,
  },
])
</script>
